import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import { EditOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

/**
 * 仪表盘页面组件
 * @returns 仪表盘组件
 */
const Dashboard: React.FC = () => {
  const navigate = useNavigate();

  // 模拟项目数据
  const projects = [
    { id: 1, name: '投资组合分析', description: '金融投资组合分析应用' },
    { id: 2, name: '风险评估', description: '客户风险评估系统' },
    { id: 3, name: '交易平台', description: '证券交易平台原型' },
  ];

  return (
    <div>
      <h2>我的项目</h2>
      <Row gutter={[16, 16]}>
        {projects.map(project => (
          <Col key={project.id} xs={24} sm={12} md={8} lg={6}>
            <Card
              title={project.name}
              actions={[
                <Button
                  key="edit"
                  type="text"
                  icon={<EditOutlined />}
                  onClick={() => navigate(`/editor?id=${project.id}`)}
                >
                  编辑
                </Button>,
                <Button
                  key="preview"
                  type="text"
                  icon={<EyeOutlined />}
                  onClick={() => navigate(`/preview?id=${project.id}`)}
                >
                  预览
                </Button>,
              ]}
            >
              {project.description}
            </Card>
          </Col>
        ))}
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card
            hoverable
            style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              cursor: 'pointer',
            }}
            onClick={() => navigate('/editor?new=true')}
          >
            <PlusOutlined style={{ fontSize: '2rem' }} />
            <p>创建新项目</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
